<template>
	<musichead class="recommend-musichead" name="推荐" :isShowback="true" />
	<view class="recommend-everyone">
		<view class="recommend-search" @click="gotoSearch()">
			<input class="uni-input" />
			<text class="iconfont icon-sousu"></text>
		</view>
		<!-- <view class="recommend-body">
			<view v-for="item in boxdata" class="recommend-box">
				
			</view>
		</view> -->
		<view class="recommend-body">
			<view class="recommend-box latest_album">
				<text>最新专辑</text>
				<view class="recommend-card-box">
					<view class="recommend-card" v-for="item in latestList" @click="gotoplay(item)">
						<image :src="item.blurPicUrl" mode=""></image>
						<view>{{item.name}}</view>
						<view>{{item.company}}</view>
					</view>
				</view>
			</view>
			<view class="recommend-box popular_singers">
				<text>热门歌手</text>
				<view class="recommend-card-box">
					<view class="recommend-card" v-for="item in popularList" @click="gotoplay(item)">
						<image :src="item.img1v1Url" mode=""></image>
						<view>{{item.name}}</view>
						<view>{{item.alias[0]}}</view>
					</view>
				</view>
			</view>
			<view class="recommend-box recommend_music">
				<text>全部MV</text>
				<view class="recommend-card-box">
					<view class="recommend-card" v-for="item in mvList" @click="gotoplay(item)">
						<image :src="item.cover" mode=""></image>
						<view>{{item.name}}</view>
						<view>{{item.artistsname}}</view>
					</view>
				</view>
			</view>
			<view class="recommend-box allMv">
				<text>推荐歌曲</text>
				<view class="recommend-card-box">
					<view class="recommend-card" v-for="item in musicList" @click="gotoplay(item)">
						<image :src="item.picUrl" mode=""></image>
						<view>{{item.name}}</view>
						<view>{{item.albumname}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<musicbackend class="musicbackend" />
</template>

<script>
	import '@/common/iconfont.css'
	import musichead from '../../components/musichead/musichead.vue'
	import musicbackend from '../../components/musicbackend/musicbackend.vue'
	import {
		latestAlbum,
		popularSingers,
		allMv,
		recommendMusic,
		searchMusic
	} from '../../common/api.js'
	export default {
		data() {
			return {
				title: 'Hello',
				latestList: [],
				popularList: [],
				mvList: [],
				musicList: []
			}
		},
		onLoad() {
			latestAlbum().then((res) => {
				const List = res.map((item) => ({
					id: item.id,
					name: item.name,
					blurPicUrl: item.blurPicUrl,
					company: item.company
				}));
				this.latestList = List;
				// console.log(this.latestList);
			});
			popularSingers().then((res) => {
				const List = res.map((item) => ({
					id: item.id,
					name: item.name,
					img1v1Url: item.img1v1Url,
					alias: item.alias
				}));
				this.popularList = List;
			});
			allMv().then((res) => {
				const List = res.map((item) => ({
					id: item.id,
					name: item.name,
					cover: item.cover,
					artistsname: item.artists[0].name
				}));
				this.mvList = List;
			});
			recommendMusic().then((res) => {
				const List = res.map((item) => ({
					id: item.id,
					name: item.name,
					picUrl: item.picUrl,
					albumname: item.song.album.name
				}));
				this.musicList = List;
			});
		},
		mounted() {
			this.getlatestAlbumData();
			this.getpopularListData();
			this.getallMvData();
			this.getrecommendMusicData();
		},
		methods: {
			async gotoplay(item) {
				console.log(item.name);
				const word = item.name;
				if (word) {
					const songlist = await searchMusic(word);
			
					// Navigate to search-result page with data
					uni.navigateTo({
						url: `/pages/search-result/search-result?songList=${encodeURIComponent(JSON.stringify(songlist))}`
					});
				}
			},
			async getlatestAlbumData() {
				try {
					const res = await latestAlbum(); // 直接获取 playlists 数组
					// console.log(res);
					if (Array.isArray(res) && res.length > 0) {
						const List = res.map((item) => ({
							id: item.id,
							name: item.name,
							blurPicUrl: item.blurPicUrl,
							company: item.company
						}));
						// console.log(List);
						this.latestList = List; // 存储完整数据
					} else {
						console.warn('播放列表数据为空');
						this.latestList = [];
					}
				} catch (error) {
					console.error('获取播放列表失败', error);
				}
			},
			async getpopularListData() {
				try {
					const res = await popularSingers(); // 直接获取 playlists 数组
					if (Array.isArray(res) && res.length > 0) {
						const List = res.map((item) => ({
							id: item.id,
							name: item.name,
							img1v1Url: item.img1v1Url,
							alias: item.alias
						}));
						this.popularList = List; // 存储完整数据
					} else {
						console.warn('播放列表数据为空');
						this.popularList = [];
					}
				} catch (error) {
					console.error('获取播放列表失败', error);
				}
			},
			async getallMvData() {
				try {
					const res = await allMv(); // 直接获取 playlists 数组
					if (Array.isArray(res) && res.length > 0) {
						const List = res.map((item) => ({
							id: item.id,
							name: item.name,
							cover: item.cover,
							artistsname: item.artists[0].name
						}));
						// console.log(List);
						this.mvList = List; // 存储完整数据
					} else {
						console.warn('播放列表数据为空');
						this.mvList = [];
					}
				} catch (error) {
					console.error('获取播放列表失败', error);
				}
			},
			async getrecommendMusicData() {
				try {
					const res = await recommendMusic(); // 直接获取 playlists 数组
					if (Array.isArray(res) && res.length > 0) {
						const List = res.map((item) => ({
							id: item.id,
							name: item.name,
							picUrl: item.picUrl,
							albumname: item.song.album.name
						}));
						// console.log(List);
						this.musicList = List; // 存储完整数据
					} else {
						console.warn('播放列表数据为空');
						this.musicList = [];
					}
				} catch (error) {
					console.error('获取播放列表失败', error);
				}
			},
		
			gotoSearch(){
				uni.navigateTo({
					url: '/pages/search/search'
				});
			}
		},
		//注册组件
		comments: {
			musichead,
			musicbackend
		}
	}
</script>

<style lang="scss">
	.recommend-musichead {
		color: #000000;
		position: absolute;
		width: 100vw;
	}

	.recommend-everyone {
		width: 100vw;
		height: calc(100vh - 50px);
		background-color: aliceblue;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.recommend-search {
		position: absolute;
		top: 80px;
		width: 85vw;
		height: 30px;
		border-radius: 20px;
		background-color: rgba(228, 228, 228, 0.5);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
		display: flex;

		input {
			width: 250px;
			height: 100%;
			border-radius: 20px 0 0 20px;
			// background-color: rgba(206, 206, 206, 0.5);
			-webkit-backdrop-filter: blur(8px);
			// backdrop-filter: blur(8px);
			padding-left: 10px;
			font-size: 14px;
			font-family: "宋体", SimSun, sans-serif;
			color: #404040;
		}

		text {
			margin: auto;
			font-size: 26px;
			color: #5e7e7e;
		}

	}

	.recommend-body {
		position: absolute;
		top: 130px;
		width: 100vw;
		height: calc(80vh - 62px);
		// background-color: #404040;
		overflow-y: auto;

		// display: flex;
		// justify-content: center;
		.recommend-box {
			width: 100vw;
			height: 152px;
			margin: auto;
			// margin-bottom: 20px;
			display: block;

			text {
				margin-left: 10px;
				font-size: 16px;
				font-weight: 700;
				font-family: KaiTi, serif;
			}

			.recommend-card-box {
				height: 129px;
				display: flex;
				overflow-x: auto;
				overflow-y: hidden;

				.recommend-card {
					width: 90px;
					height: 100%;
					// background-color: #60efd3;
					display: block;
					margin-left: 10px;

					image {
						width: 90px;
						height: 90px;
						margin: 0px;
						border-radius: 10px;
					}

					view {
						width: 90px;
						height: 15px;
						line-height: 15px;
						font-size: 12px;
						font-weight: 400;
						font-family: SimSun, serif;
						white-space: nowrap;
						/* 禁止文本换行 */
						overflow: hidden;
						/* 超出部分隐藏 */
						text-overflow: ellipsis;
						/* 显示省略号 */
					}
				}

				&::-webkit-scrollbar {
					/* Chrome, Safari and Opera */
					display: none;
				}
			}

		}

	}

	.recommend-body::-webkit-scrollbar {
		display: none;
	}

	.musicbackend {
		position: absolute;
		z-search: 10;
	}
	
	
</style>